<!--表格操作栏-->
<eui-panel [collapsible]="true" [collapsed]="true"
           [panelStyle]=""
           [headerStyle]="{padding: '2px 0px'}"
           [bodyStyle]="{padding:'10px 0px'}"
           [footerStyle]="{padding:'5px 0px', marginBottom:'1px', marginTop:'1px'}">
  <eui-panel-header>
    <div class="f-row text-center">
      <div class="f-full"><h3>{{componentTitle}}</h3></div>
    </div>
  </eui-panel-header>
  <div class="container-fluid">
    <div class="row">
      <!--商品类别。combotree多选状态下，选择的值以数组的形式存储，itemForPage.parentIds初始化为空数组-->
      <div class="col-3 form-inline">
        <eui-combotree [data]="goodsTypeData" valueField="id" textField="name"
                       [multiple]="true" [(ngModel)]="itemForPage.parentIds" [ngModelOptions]="{standalone: true}"
                       placeholder="请选择商品类别" style="height:38px;">
          <eui-tree>
            <ng-template euiItemTemplate let-node>
              {{node.name}}
            </ng-template>
          </eui-tree>
        </eui-combotree>
      </div>
      <!--商品名称-->
      <div class="col-3 form-inline">
        <label for="name">商品名称：</label>
        <input type="text" class="form-control" id="name" name="name" [(ngModel)]="itemForPage.name">
      </div>
      <!--是否激活-->
      <div class="col-3 form-inline">
        <label for="isActive">是否激活：</label>
        <select class="form-control" id="isActive" name="isActive" [(ngModel)]="itemForPage.isActive">
          <option value="all">所有</option>
          <option value="{{item.value}}" *ngFor="let item of [{value:'0',name:'激活'},{value:'1',name:'屏蔽'}];">
            {{item.name}}
          </option>
        </select>
      </div>
      <!--是否推荐-->
      <div class="col-3 form-inline">
        <label for="isActive">是否推荐：</label>
        <select class="form-control" id="isRecommend" name="isRecommend" [(ngModel)]="itemForPage.isRecommend">
          <option value="all">所有</option>
          <option value="{{item.value}}" *ngFor="let item of [{value:'0',name:'推荐'},{value:'1',name:'不推荐'}];">
            {{item.name}}
          </option>
        </select>
      </div>
    </div>
  </div>
  <eui-panel-footer>
    <eui-linkbutton iconCls="icon-add" [plain]="true" (click)="onOpenEditDlg('add')">添加</eui-linkbutton>
    <eui-linkbutton iconCls="icon-remove" [plain]="true" (click)="onOpenDeleteDlg('deleteMore')">删除</eui-linkbutton>
    <eui-linkbutton iconCls="icon-cancel" [plain]="true" (click)="onOpenDeleteDlg('deleteAll')">清空数据</eui-linkbutton>
    <eui-linkbutton iconCls="icon-reload" [plain]="true" (click)="onReLoad()">刷新</eui-linkbutton>
    <div style="display: inline-block;float: right;">
      <eui-linkbutton iconCls="icon-search" [plain]="true" (click)="onScreening()">筛选</eui-linkbutton>
      <eui-linkbutton iconCls="icon-clear" [plain]="true" (click)="onResetScreening()">清空条件</eui-linkbutton>
    </div>
  </eui-panel-footer>
</eui-panel>

<!--表格-->
<eui-datagrid [pagination]="true" [data]="data" [total]="total"
              [pageNumber]="pageNumber" [pageSize]="pageSize" [pageOptions]="pageOptions" [lazy]="true"
              (pageChange)="onPageChange($event)"
              idField="id" [loading]="loading" [loadMsg]="loadMsg"
              selectionMode="multiple" [(selection)]="selectRow" (rowDblClick)="onOpenEditDlg($event)">
  <!--1-->
  <eui-grid-column-group frozen="true" align="left" width="900">
    <eui-grid-header-row>
      <eui-grid-column cellCss="datagrid-td-rownumber" title="序号" align="center" frozen="true" width="100">
        <ng-template euiCellTemplate let-rowIndex="rowIndex">{{rowIndex + 1}}</ng-template>
      </eui-grid-column>
      <eui-grid-column field="name" title="名称" frozen="true" width="200"></eui-grid-column>
      <eui-grid-column field="parentName" title="商品类别" frozen="true" width="200">
        <ng-template euiCellTemplate let-row>
          <div *ngIf="row.parent">{{row.parent.name}}</div>
        </ng-template>
      </eui-grid-column>
      <eui-grid-column field="isActive" title="状态" frozen="true" width="100" [cellCss]="setIsActiveCellCss">
        <ng-template euiCellTemplate let-row>
          <div *ngIf="row.isActive=='0'">上架</div>
          <div *ngIf="row.isActive=='1'">售罄</div>
          <div *ngIf="row.isActive=='2'">下架</div>
        </ng-template>
      </eui-grid-column>
      <eui-grid-column field="isRecommend" title="店主推荐" frozen="true" width="100" [cellCss]="setIsRecommendCellCss">
        <ng-template euiCellTemplate let-row>
          <div *ngIf="row.isRecommend=='0'">是</div>
          <div *ngIf="row.isRecommend=='1'">否</div>
        </ng-template>
      </eui-grid-column>
      <eui-grid-column field="price" title="价格" width="100"></eui-grid-column>
      <eui-grid-column field="promotionPrice" title="活动价格" width="100"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
  <!--2-->
  <eui-grid-column-group>
    <eui-grid-header-row>
      <eui-grid-column field="introduce" title="说明" width="1000"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
  <!--3-->
  <eui-grid-column-group frozen="true" align="right" width="160">
    <eui-grid-header-row>
      <eui-grid-column field="createTime" title="上架时间" width="160" align="center"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
</eui-datagrid>

<!--添加、编辑弹框-->
<eui-dialog [closed]="editDlgClosed" [closable]="true" [modal]="true" (close)="onCloseDlg()"
            [panelStyle]="{width:'50%',height:'80%',textAlign:'center'}" [headerStyle]="{padding:'10px 0px'}"
            [bodyStyle]="{padding:'5px 2px'}"
            [footerStyle]="{padding: '10px 0px'}">
  <eui-panel-header><h4>{{editDlgTitle}}</h4></eui-panel-header>
  <div class="container user">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="margin: 0 auto;"><!--自适应设置-->
      <form role="form" novalidate [formGroup]="itemForForm" (ngSubmit)="onSubmitForm(itemForForm)">
        <!--商品类别comboTree。comboTree单选状态下，以字符串的形式存储，parentId初始化为null-->
        <div class="form-group text-left">
          <eui-combotree [data]="goodsTypeData" valueField="id" textField="name"
                         [(ngModel)]="parentId" [ngModelOptions]="{standalone: true}"
                         style="width:100%;height:38px;" placeholder="请选择商品类别">
            <eui-tree>
              <ng-template euiItemTemplate let-node>
                {{node.name}}
              </ng-template>
            </eui-tree>
          </eui-combotree>
        </div>
        <!--封面comboTree-->
        <div class="form-group text-left">
          <eui-combotree [data]="coverTypeData" valueField="src" textField="name"
                         [(ngModel)]="coverSrc" [ngModelOptions]="{standalone: true}"
                         style="width:100%;height:38px;" placeholder="请选择封面">
            <eui-tree>
              <ng-template euiItemTemplate let-node>
                {{node.name}}
              </ng-template>
            </eui-tree>
          </eui-combotree>
        </div>
        <div class="form-group user-field" *ngIf="coverSrc">
          <i class="fa fa-internet-explorer fa-lg"></i>
          <input type="text" class="form-control" name="coverSrc" [value]="coverSrc" [disabled]="true">
        </div>
        <!--是否激活-->
        <div class="form-group text-left" *ngIf="editRow.id">
          <div class="form-control">
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input type="radio" formControlName="isActive" value="0"> 上架
              </label>
            </div>
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input type="radio" formControlName="isActive" value="1"> 售罄
              </label>
            </div>
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input type="radio" formControlName="isActive" value="2"> 下架
              </label>
            </div>
          </div>
        </div>
        <!--是否推荐-->
        <div class="form-group text-left" *ngIf="editRow.id">
          <div class="form-control">
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input type="radio" formControlName="isRecommend" value="0"> 推荐
              </label>
            </div>
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input type="radio" formControlName="isRecommend" value="1"> 不推荐
              </label>
            </div>
          </div>
        </div>
        <!--名称-->
        <div class="form-group user-field">
          <i class="fa fa-file-text-o fa-lg"></i>
          <input type="text" class="form-control" formControlName="name"
                 placeholder="{{placeholder.name.title}}{{placeholder.name.prompt}}">
        </div>
        <!--价格-->
        <div class="form-group user-field">
          <i class="fa fa-jpy fa-lg"></i>
          <input type="text" class="form-control" formControlName="price"
                 placeholder="{{placeholder.price.title}}{{placeholder.price.prompt}}">
        </div>
        <!--活动价格-->
        <div class="form-group user-field">
          <i class="fa fa-jpy fa-lg"></i>
          <input type="text" class="form-control" formControlName="promotionPrice"
                 placeholder="{{placeholder.promotionPrice.title}}{{placeholder.promotionPrice.prompt}}">
        </div>
        <!--说明-->
        <div class="form-group">
          <textarea class="form-control" rows="3" formControlName="introduce"
                    placeholder="{{placeholder.introduce.title}}{{placeholder.introduce.prompt}}"></textarea>
        </div>
      </form>
    </div>
  </div>
  <!--提交按钮-->
  <eui-panel-footer>
    <button type="button" class="btn" (click)="onSubmitForm(itemForForm)"
            [disabled]="formBtnDisabled||itemForForm.invalid||parentId==null||parentId==''||coverSrc==null">
      保存
    </button>&nbsp;&nbsp;
    <button type="button" class="btn" (click)="onEditCancel()">取消</button>
  </eui-panel-footer>
</eui-dialog>
